<template>
<!--测评1-->
  <div>
    <ceping>
      <ul class="step">
        <li class="active">
          <p>基本资料</p>
          <span></span>
        </li>
        <li>
          <p>教育经历</p>
          <span></span>
        </li>
        <li>
          <p>工作经历</p>
          <span></span>
        </li>
        <li>
          <p>能力测评</p>
          <span></span>
        </li>
      </ul>
      <div class="ceping_form">
        <Form :model="person" :label-width="102" :rules="ceping1Validate" ref="ceping1">
          <FormItem label="姓名" prop="userName">
            <Input v-model="person.userName" placeholder="请输入姓名" :maxlength="10"/>
          </FormItem>
          <FormItem label="手机号" prop="telephone">
            <Input v-model="person.telephone" placeholder="请绑定手机号" :maxlength="11" ref="cepingtele" disabled @on-keyup="validateTel"/>
          </FormItem>
          <FormItem label="性别" prop="sex">
            <Select v-model="person.sex" placeholder="性别">
              <Option :value= 1 >女</Option>
              <Option :value= 2 >男</Option>
            </Select>
          </FormItem>
          <FormItem label="出生年月日" prop="birthday">
            <DatePicker type="date" placeholder="选择日期" placement="top" :value="person.birthday" @on-change="getBirthday"></DatePicker>
          </FormItem>
         <!-- <FormItem label="公司" prop="company">
            <Input v-model="person.company" placeholder="请输入您的公司" :maxlength="22"/>
          </FormItem>
          <FormItem label="部门" prop="department">
            <Input v-model="person.department" placeholder="请输入您所在的部门" :maxlength="45"/>
          </FormItem>
          <FormItem label="职位" prop="positionName">
            <Input v-model="person.positionName" placeholder="请输入您的职位" :maxlength="45"/>
          </FormItem>-->
          <FormItem label="邮箱" prop="email">
            <Input v-model="person.email" placeholder="请输入您的邮箱" :maxlength="80"/>
          </FormItem>
          <FormItem>
            <Button class="nextbtn" @click="next">下一步</Button>
          </FormItem>
        </Form>
      </div>
    </ceping>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .banner{
    height: 360px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }

  form{
    width: 360px;
    margin:50px  0 0 50px ;
  }
.nextbtn{
  background-color: #957960;
  height: 55px;
  width: 221px;
  font-size: 16px;
  color: #fff;
}
  li.active{
    span:after{
      background-color: #957960 !important;
    }
  }
</style>
<script type="text/ecmascript-6">
  import ceping from '../template/ceping'
  import {userDataWeb,updataUserData,centreInfoWeb,abilityPage} from '../../http'

  export default {
        name: '',
        props: {},
        data() {
            return {
              isSpinShow:false,
              person: {             //个人资料
                userName: '',       //姓名
                nickName: '',       //昵称
                sex: -1,            //性别
                birthday: '',       //生日
                company: '',        //公司
                department: '',     //部门
                positionName: '',   //职位
                telephone: '',      //电话
                email: '',          //邮箱
              },
              //基本资料表单验证规则
              ceping1Validate:{
                userName:[
                  {required:true,message:'请输入您的姓名',trigger:'blur'}
                ],
                telephone:[
                  {required:true,message:'请输入您的手机号',trigger:'blur'}
                ],
                sex:[
                  {required:true,message:'请选择您的性别',trigger:'change',type: 'number'}
                ],
                birthday:[
                  {required:true,message:'请选择您的生日',trigger:'blur'}
                ],
                email:[
                  {required:true,message:'请输入您的邮箱',trigger:'blur'},
                  {type: 'string',pattern : /^[\w\+\-]+(\.[\w\+\-]+)*@[a-z\d\-]+(\.[a-z\d\-]+)*\.([a-z]{2,4})$/ ,message:'邮箱格式不正确',trigger:'blur'}
                ],
                company:[
                  {required:true,message:'请输入您的公司',trigger:'blur'}
                ],
                department:[
                  {required:true,message:'请输入您所在的部门',trigger:'blur'}
                ],
                positionName:[
                  {required:true,message:'请输入您的职位',trigger:'blur'}
                ],
              },
            };
        },
        methods: {
          validateTel() {
            this.person.telephone = this.$refs.cepingtele.value.replace(/[^\d]{1,11}/g, "")
          },
          getBirthday(value){
            this.person.birthday = value;
          },
          next(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户信息表单验证
              this.$refs['ceping1'].validate((valid) => {
                if (valid) {
                  //用户是否登录
                  centreInfoWeb().then(res => {
                    if (res.code === 200) {
                      //修改基本资料
                      updataUserData({
                        userName: this.person.userName,
                        nickName: this.person.nickName,
                        sex: this.person.sex,
                        birthday: this.person.birthday,
                        mobile: this.person.telephone,
                        email: this.person.email
                      }).then(res => {
                        if (res.code === 200) {
                          //是否购买人才测评
                          abilityPage().then(res => {
                            this.isSpinShow = false;
                            if (res.code === 200) {
                              if (res.data.isBuy === 1) {
                                this.$Notice.success({
                                  title: '人才测评提醒',
                                  desc: '基本资料保存成功!',
                                  duration: 3,
                                });
                                this.$router.push({
                                  name: 'ceping2'
                                })
                              } else {
                                this.$Notice.warning({
                                  title: "人才测评提醒",
                                  desc: "请先购买人才能力测评",
                                  duration: 3,
                                });
                                this.$router.push({
                                  name: 'ceping'
                                })
                              }
                            }
                          }).catch()
                        } else {
                          this.isSpinShow = false;
                          this.$Notice.warning({
                            title: "人才测评提醒",
                            desc: "基本资料保存失败",
                            duration: 3,
                          });
                        }
                      }).catch();
                    } else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: '登录提醒 ',
                        desc: '使用人才测评，需用户登录！ ',
                        duration: 3,
                      });
                      this.$router.push({name: 'ceping'});
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "人才测评提醒",
                    desc: '请填写相关信息!',
                    duration: 3,
                  });
                }
              })
            }
          },
          getCeping1(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //用户是否购买人才测评
                  abilityPage().then(res => {
                    if (res.code === 200) {
                      if (res.data.isBuy === 1) {
                        userDataWeb().then(res => {
                          if(res.code === 200) {
                            this.person = res.data;
                            if(this.person.sex == '' || this.person.sex == null || this.person.sex == undefined){
                              this.person.sex = 1;
                            }
                            this.isSpinShow = false;
                          }else {
                            this.isSpinShow = false;
                          }
                        });
                      } else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "人才测评提醒",
                          desc: "请先购买人才能力测评",
                          duration: 3,
                        });
                        this.$router.push({
                          name: 'ceping'
                        })
                      }
                    }else {
                      this.isSpinShow = false;
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: '登录提醒 ',
                    desc: '使用人才测评，需用户登录！ ',
                    duration: 3,
                  });
                  this.$router.push({name: 'ceping'});
                }
              })
            }
          }
        },
        created() {
          this.getCeping1();
          /*this.$router.push({
            name:'ceping'
          })*/
        },
        components: {
          ceping
        }
    }
</script>
